<template>
  <view>
     <!-- 前端铺子案例 -->
     <view>
        <view class="title-header" :style="titleBgStyle">
          <view class="title-text text-bold" >  前 / 端 / 铺 / 子 / 案 / 例 </view>
        </view>
        <view class='nav-list margin-top'>
          <!-- 指定点击时的样式类，当hover-class="none"时，没有点击态效果 -->
            <navigator open-type="navigate" hover-class='none' :url="'/tn_components/' + item.id" 
                      :class="'nav-li bg-kuxuan' + ((index+1) % 16)" 
                      v-for="(item, index) in kuxuan" 
                      :key="index" :style="navLiBgStyle">
               <view class="nav-name">{{item.name}}</view>
            </navigator>
        </view>
     </view>

      <!-- vue 相关知识 -->
      <view>
          <view class="title-header" :style="titleBgStyle">
             <view class="title-text text-bold" >  vue / 相 / 关 / 知 / 识  </view>
          </view>
          <view class='nav-list margin-top'>
            <!-- 指定点击时的样式类，当hover-class="none"时，没有点击态效果 -->
            <navigator open-type="navigate" hover-class='none' :url="'/tn_components/' + item.id" 
                      :class="'nav-li bg-kuxuan' + ((index+1) % 16)" 
                       v-for="(item, index) in vueKnowledge" 
                       :key="index" :style="navLiBgStyle">
               <view class="nav-name">{{item.name}}</view>
            </navigator>
         </view>
      </view>
      <!-- vue 相关知识 -->
      <view>
          <view class="title-header" :style="titleBgStyle">
             <view class="title-text text-bold" >  大 / 师 / 课 / 案 / 例 </view>
          </view>
          <view class='nav-list margin-top'>
            <!-- 指定点击时的样式类，当hover-class="none"时，没有点击态效果 -->
            <navigator open-type="navigate" hover-class='none' :url="'/tn_components/' + item.id" 
                      :class="'nav-li bg-kuxuan' + ((index+1) % 16)" 
                       v-for="(item, index) in masterclass" 
                       :key="index" :style="navLiBgStyle">
               <view class="nav-name">{{item.name}}</view>
            </navigator>
         </view>
      </view>

  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { kuxuan, vueKnowledge, masterclass } from '@/common/example-data'
import wcswF from '@/static/bg/wccswF.png'
import nyU04x from '@/static/bg/NyU04x.png'


const titleBgStyle = reactive<any>({
    backgroundImage: `url(${wcswF})`,
    backgroundSize: 'cover',
})

const navLiBgStyle = reactive<any>({
   backgroundImage: `url(${nyU04x})`,
   backgroundSize: 'cover',
   backgroundPosition: 'center'
})

</script>

<style lang="scss">
.title-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120rpx;
  font-size: 40rpx;
  padding: 40rpx 0 0 0; 
  font-weight: bold;
}

.title-text {
		background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
}

.nav-list {
		display: flex;
    justify-content: space-between;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
}

.nav-li {
  position: relative;
  padding: 30upx 0;
  border-radius: 12upx;
  width: 45%;
  margin: 0 2.5% 40upx;
  z-index: 1;
}

.nav-li::after{
  content: '';
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10upx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-name {
  font-size: 28upx;
  text-transform: Capitalize;
  margin-top: 20upx;
  margin-left: 30upx;
  position: relative;
}

.nav-name::before {
  content: '';
  position: absolute;
  display: block;
  width: 40rpx;
  height: 6rpx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: '';
  position: absolute;
  display: block;
  width: 100rpx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40rpx;
  opacity: 0.3;
}


.margin-top {
	margin-top: 30upx;
}

/*  */
.bg-kuxuan1 {
  background-color: #FF5656;
  color: #fff;
}

.bg-kuxuan2 {
  background-color: #6F68DF;
  color: #fff;
}

.bg-kuxuan3 {
  background-color: #9c26b0;
  color: #fff;
}

.bg-kuxuan4 {
  background-color: #0070FF;
  color: #fff;
}

.bg-kuxuan5 {
  background-color: #1cbbb4;
  color: #fff;
}

.bg-kuxuan6 {
  background-color: #BC78EC;
  color: #fff;
}

.bg-kuxuan7 {
  background-color: #f39902;
  color: #fff;
}

.bg-kuxuan8 {
  color: #fff;
  background-color: #19CF8A;
}

.bg-kuxuan9 {
  color: #fff;
  background-color: #8799a3;
}

.bg-kuxuan10 {
  color: #fff;
  background-color: #0396FF;
}

.bg-kuxuan11 {
  color: #fff;
  background-color: #BC78EC;
}

.bg-kuxuan12 {
  color: #fff;
  background-color: #FFC32E;
}

.bg-kuxuan13 {
  color: #fff;
  background-color: #a5673f;
}
.bg-kuxuan14 {
  color: #fff;
  background-color: #FF4F94;
}
.bg-kuxuan15 {
  color: #fff;
  background-color: #8DC63F;
}
.bg-kuxuan16 {
  color: #fff;
  background-color: #00c4fb;
}
</style>
